<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            width: 80%;
        }

        /* nav ul li {
            margin-bottom: -1px;
            background: none;
            border: 1px solid transparent;
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;

            padding: 0.5rem 1rem;
            color: #0d6efd;
            text-decoration: none;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        }

        nav ul {
            display: flex;
            flex-wrap: wrap;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
            border-bottom: 1px solid #dee2e6;
        }

        nav ul li:hover,
        nav ul li:focus {
            color: #0a58ca;
            border-color: #e9ecef #e9ecef #dee2e6;
        }

        nav ul li:active {
            color: #495057;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        } */

        nav ul{
            list-style: none;
            color: rgb(0, 162, 255);
            padding-left: 0;
            margin-bottom: 0;
            border-bottom: 2px solid gray;
            display: flex;
        }

        nav ul li{
            display: inline-block;
            padding: 0.25rem 0.5rem;
            margin-bottom: -2px;
            border: 2px solid transparent;
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;
            
        }

        nav ul li:hover{
            /* border: 2px solid; */
            border-color: gray ;
            border-bottom: 2px solid #fff;
            }
    </style>
</head>

<body>
    <nav>
        <ul>
            <li>TAB1</li>
            <li>TAB2</li>
            <li>TAB3</li>
        </ul>
    </nav>

    <h1>
        THIS IS A QUESTION
    </h1>

</body>

</html>